<template>
    <div class="top-tabs" :class="{'is-width':isWidth}">
            <el-tabs v-model="$store.state.activePage" type="border-card" closable @tab-click="tabClick"
                     v-if="options.length" @tab-remove="tabRemove" class="card-tabs">
                <el-tab-pane :key="item.name" v-for="(item, index) in $store.state.openList" :label="item.name" :name="item.path" style="overflow: hidden;height: 100%">


                    <div v-show="$route.path=='/index'">
                        <el-row>
                            <el-col :span="24" class="top-group">
                                <div>
                                    <i class="el-icon-s-operation"></i>
                                    <span class="group-text">栏目划分</span>
                                    <span class="group-num">{{countArray[0]}}</span>
                                </div>
                                <div>
                                    <i class="el-icon-user-solid"></i>
                                    <span class="group-text">用户人数</span>
                                    <span class="group-num">{{countArray[1]}}</span>
                                </div>
                                <div>
                                    <i class="el-icon-s-order"></i>
                                    <span class="group-text">新闻管理</span>
                                    <span class="group-num">{{countArray[2]}}</span>
                                </div>
                                <div>
                                    <i class="el-icon-s-comment"></i>
                                    <span class="group-text">留言管理</span>
                                    <span class="group-num">{{countArray[3]}}</span>
                                </div>

                            </el-col>
                            <el-col :span="24">
                                <div id="echartIndex" style="width: 1650px;height:500px;margin-top: 100px"></div>
                            </el-col>

                        </el-row>
                    </div>



                </el-tab-pane>
            </el-tabs>

        <router-view/>
    </div>
</template>

<script>

    import New from '@/js/eventBus.js'
    import echarts from "echarts";
    import indexApi from "@/api/index/indexApi"
    export default {
        name: "TopTabs",
        components:{

        },
        data(){
            return {
                isWidth:false,
                activeIndex:'/index',
                options:[{route:'/index',name:'首页'}],
                countArray:[],
                group:{
                    empNum:52,
                    goodNum:1022,
                    userNum:55045,
                    shopNum:952740,
                },

            }
        },
        mounted() {
            this.getEchart();
        },
        methods:{
            tabClick(tab){
                this.$store.commit('updOpenList', tab)
                this.$router.push(tab.name)
            },
            tabRemove(tab){
                this.$store.commit('delOpenList', tab)
            },
            getEchart(){
                let myChart = echarts.init(document.getElementById('echartIndex'));
                let option = {
                    title: {
                        text: '               用户访问来源'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {},
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        },
        created:async function(){
            New.$on("on-top-tabs", data => {
                this.isWidth = data
            });
            let res =await indexApi.getCount();
            if (res.code == '200'){
               this.countArray = res.data
            }
        },
    }
</script>

<style scoped>
    .top-tabs{
        width: calc(100% - 201px);
        height: calc(100% - 55px);
        margin-left: 201px;
        padding-top: 55px;
        transition: 0.38s;
        -moz-transition: 0.38s;
        -o-transition: 0.38s;

    }
    .is-width{
        width: calc(100% - 65px);
        margin-left: 65px;
        transition: 0.38s;
        -moz-transition: 0.38s;
        -o-transition: 0.38s;
    }
    .el-tabs--border-card{
        border-bottom: 0px;
        box-shadow: none !important;
    }
    .el-tabs__content{
        padding: 0px !important;
    }
    .top-group div{
        cursor: pointer;
        width: 20%;
        margin-left: 4%;
        margin-top: 50px;
        border-radius: 10px;
        background-color: #eaf4ff;
        float: left;
        height: 100px;
    }
    .top-group div i{
        width: 50%;
        height: 100%;
        text-align: left;
        line-height: 100px;
        padding-left: 25px;
        font-size: 40px;
        float: left;
    }
    .top-group div span{
        float: left;
        width: calc(50% - 25px);
    }
    .top-group div .group-text{
        margin-top: 15px;
        font-size: 20px;
        color: #9a9a9a;
    }
    .top-group div .group-num{
        margin-top: 5px;
        font-size: 25px;
        text-align: left;
    }



</style>